﻿@{
    ViewBag.Title = "ComponentAdd";
}
@model CRM.Admin.Contracts.Dto.Customer.ComponentDto
@section head
{
    <link href="@Url.Content("~/ScriptPlugin/easyui/themes/gray/easyui.css")" rel="stylesheet" />
    <link href="@Url.Content("~/ScriptPlugin/easyui/themes/icon.css")" rel="stylesheet" />
    <script type="text/javascript" src="@Url.Content("~/ScriptPlugin/easyui/jquery.easyui.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/ScriptPlugin/easyui/locale/easyui-lang-zh_CN.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/ScriptPlugin/xlayer/extend/layer.ext.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/KingsSharp.DataGrid.Filter.js")"></script>
    <script src="@Url.Content("~/ScriptPlugin/WdatePicker/js/WdatePicker.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/form2json.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.extended.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/picdata.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.linq.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/ScriptPlugin/webuploader/webuploader.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/KingsSharp.Uploader.js")"></script>
    <script type="text/javascript">
        function SaveData(index) {
            if ($("#productForm").valid()) {
                var dto = $('#productForm').serializeJson();
                K.AjaxJson("@Url.Content("~/Customer/Product/ComponentUpdate")", dto, function(result) {
                    parent.K.layer.callback(index, result, dto);
                    parent.K.layer.close(index);
                });
            }
        }
    </script>

    <style type="text/css">
        .uploader {
            text-align: center;
            float: left;
            width: 50px;
            height: 32px;
            line-height: 32px;
            color: blue;
        }

        .uploader-show {
            float: left;
            width: 70%;
            line-height: 32px;
        }

            .uploader-show a {
                margin-right: 5px;
                color: green;
            }

            .uploader-show img {
                width: 100%;
                height: 32px;
            }

                .uploader-show img.mulit {
                    width: 32px;
                    height: 32px;
                    padding-right: 5px;
                    border: 1px solid #fff;
                    margin-left: 3px;
                }

                .uploader-show img.red {
                    border: 1px solid red;
                }

            .uploader-show .imgBox .removeImg {
                margin-top: 9px;
                display: block;
                width: 40px;
                float: left;
                text-align: center;
            }

            .uploader-show .imgBox .hongcha {
                position: absolute;
                width: 13px !important;
                height: 13px !important;
                right: -10px;
                top: -5px;
                display: none;
            }

            .uploader-show .imgBox:hover .hongcha {
                display: block;
                cursor: pointer;
            }

            .uploader-show .imgBox {
                position: relative;
                width: 32px;
                float: left;
                margin-left: 10px;
            }
    </style>
}
<form action="" id="productForm" name="productForm">
    <div class="content-form">
        <table class="content-table">
            <tr>
                <th><span>零件名称</span></th>
                <td>
                    <input type="hidden" id="ProductId" name="ProductId" value="@Model.ProductId" />
                    <input type="hidden" id="Id" name="Id" value="@Model.Id" />
                    <input type="text" data-valid="required" id="Name" name="Name" value="@Model.Name"/>
                </td>
                <th>零件图样</th>
                <td>
                    <input type="hidden" id="PatternPath" name="PatternPath" value="@Model.PatternPath"/>

                    <div id="picker2" class="uploader">
                        上传
                    </div>
                    <div class="uploader-show" data-mulit="true">

                    </div>
                </td>
            </tr>
            <tr>
                <th>尺寸</th>
                <td>
                    <input type="text" id="Size" name="Size" value="@Model.Size"/>
                </td>
                <th>
                    下料尺寸
                </th>
                <td>
                    <input type="text" id="DownSize" name="DownSize" value="@Model.DownSize"/>
                </td>
            </tr>
        </table>
    </div>
</form>
@section foot{
    <script type="text/javascript">
        var uploaders = [];
        $(".uploader").each(function () {
            var that = $(this);
            var fileType = $(this).attr("data-type");
            var imgshow = that.parent().find(".uploader-show");
            var urlhidden = that.parent().find("input[type='hidden']");
            var pickid = "#" + that.prop("id");
            var ismulit = false;
            var fileInputName = "file";
            if (urlhidden) {
                fileInputName = urlhidden.prop("name");
            }
            if (imgshow.attr("data-mulit")) {
                ismulit = true;
            }

            var parameter = {
                swf: '@Url.Content("~/ScriptPlugin/webuploader/Uploader.swf")',
                server: '@Url.Content("~/Customer/CustomerInfo/UploaderProcess")',
                pick: {
                    id: pickid,
                    multiple: ismulit
                },
                resize: false,
                auto: true,
                fileVal: fileInputName
            };
            var eventer = {
                fileQueued: function (file) {
                    if (fileType && fileType === "file") {
                        if (ismulit) {
                            imgshow.append("（<a>" + file.name + "</a>）");
                        } else {
                            imgshow.html("（<a>" + file.name + "</a>）");
                        }
                    } else {
                        uploader.makeThumb(file, function (error, ret) {
                            if (error) {
                                imgshow.html("预览错误");
                            } else {
                                if (ismulit) {
                                    imgshow.append("<div class=\"imgBox\"><img onclick=\"\" src=\"" + ret + "\" class=\"mulit\"  /><img onclick=\"removeImg($(this))\"  src=\"@Url.Content("~/Images/hongcha.png")\" class=\"hongcha\" /></div>");
                                } else {
                                    imgshow.append("<div class=\"imgBox\"><img onclick=\"\" src=\"" + ret + "\"  /><img onclick=\"removeImg($(this))\"  src=\"@Url.Content("~/Images/hongcha.png")\" class=\"hongcha\" /></div>");
                                }
                            }
                        });
                    }
                },
                uploadSuccess: function (file, response) {
                    if (response.Filish) {
                        if (ismulit) {
                            var oldval = urlhidden.val();
                            if (oldval != "") {
                                oldval += ",";
                            }
                            urlhidden.val(oldval + response.Path);
                        } else {
                            urlhidden.val(response.Path);
                        }
                    }
                },
                uploadError: function () {
                    K.Alert("上传出错");
                }
            };
            if (fileType && fileType === "file") {
                var uploader = new K.Uploader().createFile(parameter, eventer);
                uploaders.push(uploader);
            } else {
                var uploader = new K.Uploader().createImage(parameter, eventer);
                uploaders.push(uploader);
            }
        });

        //查看大图
        function showBigImg(obj) {
            var json = {
                "data": [
                    {
                        "src": obj.attr("src"), //原图地址
                    }
                ]
            };
            layer.photos({
                photos: json
            });
        }
        //删除图片
        function removeImg(obj) {
            var imgUrlStr = obj.closest("td").find("input[type=hidden]");
            var imgUrlArr = imgUrlStr.val().split(",");
            imgUrlArr.splice(obj.parent().index(), 1);
            obj.parent().remove();
            K.Alert("删除成功");
            $("#" + imgUrlStr.attr("id")).val(imgUrlArr.toString());
        }
    </script>
}